<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="getTags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <!-- 系统消息 -->
      <div class="infor-right" v-show="ctnIndex == 0">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="sys-infor" v-for="(item, index) in list" :key="index">
            <div class="sys-top">
              <div class="sys-header">
                <img src="../assets/imgs/xt.png" alt="" />
              </div>
              <div class="sys-right">
                <div class="sys-name">系统通知</div>
                <div class="sys-date">{{ item.updateTime }}</div>
              </div>
            </div>
            <div class="sys-content">【系统公告】 {{ item.content }}</div>
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div class="infor-right" v-show="ctnIndex == 1">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="talk-content" v-if="res.listShow" v-loading="loading">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header">
                <div class="headerCtn">
                  <div
                    class="talk-img"
                    @click="goUp('home', item.sendCommentId)"
                  >
                    <img :src="item.sendCommentHeadImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.sendCommentNickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">{{ item.commentContent }}</div>
              <div class="reply" @click="goUp('artDetail', item.articleId)">
                <div class="reply-content">
                  {{ item.articleTitle }}
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
      <!-- 点赞 -->
      <div class="infor-right" v-show="ctnIndex == 2">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="talk-content" v-if="res.listShow" v-loading="loading">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header" @click="goUp('home', item.sendPointId)">
                <div class="headerCtn">
                  <div class="talk-img">
                    <img :src="item.sendPointHeadImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.sendPointNickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">我闻了这篇文章</div>
              <div class="reply" @click="goUp('artDetail', item.articleId)">
                <div class="reply-content">{{ item.articleTitle }}</div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
      <!-- 分享 -->
      <div class="infor-right" v-show="ctnIndex == 3">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="talk-content" v-if="res.listShow" v-loading="loading">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div
                class="talk-header"
                @click="goUp('home', item.articleuserid)"
              >
                <div class="headerCtn">
                  <div class="talk-img">
                    <img :src="item.headImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.nickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">{{ item.forwardContent }}</div>
              <div
                class="reply"
                @click="goUp('artDetail', item.getForwardArticleId)"
              >
                <div class="reply-content">
                  {{ item.articleTitle }}
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
      <!-- 荧光棒 -->
      <div class="infor-right" v-show="ctnIndex == 4">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="talk-content" v-if="res.listShow" v-loading="loading">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header" @click="goUp('home', item.sendRewardId)">
                <div class="headerCtn">
                  <div class="talk-img">
                    <img :src="item.headImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.nickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">打赏了{{ item.number }}荧光棒</div>
              <div class="reply" @click="goUp('artDetail', item.articleId)">
                <div class="reply-content">
                  {{ item.articleTitle }}
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
      <!-- 加速币 -->
      <div class="infor-right" v-show="ctnIndex == 5">
        <div class="account">消息中心</div>
        <div class="infor">
          <div class="infor-title">全部信息</div>
          <div class="talk-content" v-if="res.listShow" v-loading="loading">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header">
                <div class="headerCtn">
                  <div
                    class="talk-img"
                    @click="goUp('home', item.sendRewardId)"
                  >
                    <img :src="item.headImage" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.nickName }}</div>
                  <div class="talk-date">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="favor-content">打赏了{{ item.number }}加速币</div>
              <div class="reply" @click="goUp('artDetail', item.articleId)">
                <div class="reply-content">
                  {{ item.articleTitle }}
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
    </div>
    <div class="paging" v-if="res.listShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import { provinceAndCityData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      tags: [
        { name: "系统消息", isRed: false },
        { name: "评论", isRed: false },
        { name: "真香", isRed: false },
        { name: "转发", isRed: false },
        { name: "荧光棒", isRed: false },
        { name: "加速币", isRed: false },
      ],
      list: [{}, {}, {}],
      defaultIndex: 0,
      ctnIndex: 0,
      options: provinceAndCityData,
      selectedOptions: [],
      value1: "",
      res: "",
      count: 0,
      loading: true,
      inforObj: null,
    };
  },
  components: {
    Sidebar,
    NavHeader,
  },
  computed: {
    getInfor() {
      return { ...this.$store.state.infromation };
    },
    //小红点显示操作
    getTags() {
      let infor = this.getInfor;
      let nameArr = [
        "sysCount",
        "commentCount",
        "pointCount",
        "forwardCount",
        "ygbRewardCount",
        "speedRewardCount",
      ];
      for (let i of this.tags.keys()) {
        if (infor[nameArr[i]] !== 0 && infor[nameArr[i]] !== void 0) {
          this.tags[i].isRed = true;
        } else {
          this.tags[i].isRed = false;
        }
      }
      return this.tags;
    },
  },
  created() {
    //根据索引值展示板块
    if (this.$route.query.id != void 0) {
      this.defaultIndex = this.$route.query.id * 1;
      this.ctnIndex = this.$route.query.id * 1;
      if (this.defaultIndex == 1) {
        this.init("/comment/frontend/glist", 1);
      }
    } else {
      this.init("/sysmessage/frontend/getMessageList", 1);
    }
  },
  methods: {
    init(url, page) {
      this.loading = true;
      this.$post(`/laiwen${url}?page=${page}&limit=20`, {}).then((res) => {
        this.res = res;
        this.count = res.count;
        this.list = res.list;
        this.delList(res, "list");
        this.loading = false;
      });
    },
    handleChange(value) {
      console.log(CodeToText[value[0]]);
      console.log(CodeToText[value[1]]);
    },
    //接受子组件index
    getIndex(e) {
      let that = this;
      that.ctnIndex = e;
      switch (that.ctnIndex) {
        case 0:
          that.init("/sysmessage/frontend/getMessageList", 1);
          break;
        //评论
        case 1:
          that.init("/comment/frontend/glist", 1);
          break;
        //点赞
        case 2:
          that.init("/point/frontend/glist", 1);
          break;
        //转发
        case 3:
          that.init("/article/frontend/glist", 1);
          break;
        //荧光棒
        case 4:
          that.init("/reward/frontend/glist", 1);
          break;
        //加速币
        case 5:
          that.init("/reward/frontend/jlist", 1);
          break;
      }
    },
    //跳到UP
    goUp(path, id) {
      this.navigate(path, id);
    },
    changeDate(val) {
      console.log(this.value1);
    },
    //分页方法
    changePage(size) {
      let that = this;
      switch (that.ctnIndex) {
        case 0:
          that.init("/sysmessage/frontend/getMessageList", size);
          break;
        //评论
        case 1:
          that.init("/comment/frontend/glist", size);
          break;
        //点赞
        case 2:
          that.init("/point/frontend/glist", size);
          break;
        //转发
        case 3:
          that.init("/article/frontend/glist", size);
          break;
        //荧光棒
        case 4:
          that.init("/reward/frontend/glist", size);
          break;
        //加速币
        case 5:
          that.init("/reward/frontend/jlist", size);
          break;
      }
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/infor.css"></style>
